<template>
   <div>
     <el-form :model="addForm" ref="ruleForm" label-width="110px" class="demo-ruleForm" style="margin-right: 20px">

       <el-form-item label="配送门店状态">
         <div v-if="shopStatus">
           <el-tag type="primary" >{{shopStatus}}</el-tag>
         </div>
       </el-form-item>

       <el-form-item label="门店名称">
         <el-input style="width: 400px" v-model="addForm.shop_name" placeholder="请输入门店名称" />
         <div class="tip">
           说明：门店名称格式请按照 【XX品牌-XX店】填写，例：百果园-望京店，注：该名称需与实体门店门牌保持一致，保证骑手取货可确认门店
         </div>
       </el-form-item>

       <el-form-item label="门店联系人姓名">
         <el-input style="width: 400px" v-model="addForm.contact_name" placeholder="请输门店联系人姓名" />
       </el-form-item>

       <el-form-item label="联系电话" >
         <el-input style="width: 400px" v-model="addForm.contact_phone" placeholder="请输入联系电话" />
       </el-form-item>

       <el-form-item label="邮箱">
         <el-input style="width: 400px" v-model="addForm.contact_email" placeholder="请输入邮箱" />
       </el-form-item>

       <el-form-item label="门店地址">
         <el-input style="width: 400px" v-model="addForm.shop_address" placeholder="请输入门店地址" />
       </el-form-item>

       <el-form-item label="门牌号">
         <el-input style="width: 400px" v-model="addForm.shop_address_detail" placeholder="请输入门牌号" />
       </el-form-item>

       <el-form-item label="营业时间" style="text-align: left;">
         <el-time-picker style="width: 400px" is-range v-model="businessTime" value-format="HH:mm:ss"
                         range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
         </el-time-picker>
       </el-form-item>

       <div style="text-align: center">
         <el-button v-if="!deliveryShopInfo" style="margin: auto" type="primary" @click="submitBtn">创建</el-button>
         <el-button v-else style="margin: auto" type="primary" @click="updateSubmitBtn">修改</el-button>
       </div>
     </el-form>
   </div>
</template>

<script>
  export default {
    name: "meituan-config",
    props: {
      merchantId: '',
      lat: '',
      lng: ''
    },
    watch: {
      merchantId(val){
        if(val){
          this.initData()
        }
      }
    },
    data() {
      return {
        addressKeyword: '',
        addForm: {
          shop_id: '',
          shop_name: '',
          contact_name: '',
          contact_phone: '',
          contact_email: '',
          shop_address: '',
          shop_address_detail: '',
          shop_lng: '',
          shop_lat: '',
          start_time: '',
          end_time: '',
          status: '',
        },
        businessTime: ['',''],
        shopStatus: '',
        deliveryShopInfo: ''
      }
    },
    mounted() {
      this.initData()
    },
    methods: {

      //初始化店铺数据
      initData() {
        this.businessTime = ['','']
        this.shopStatus = ''
        this.deliveryShopInfo = ''
        this.getDeliveryShopDetail()
      },

      //获取配送门店详情
      async getDeliveryShopDetail() {
        const res = await this.$api.getDeliveryShopInfo({merchant_id: this.merchantId})
        if(res.data.level==='success'){
          let item = res.data.data

          this.shopStatus = item.meituan_status //状态
          this.deliveryShopInfo = item

          this.addForm.shop_name = item.shop_name
          this.addForm.contact_name = item.contact_name
          this.addForm.contact_phone = item.contact_phone
          this.addForm.contact_email = item.contact_email
          this.addForm.shop_address = item.shop_address
          this.addForm.shop_address_detail = item.shop_address_detail

          let businessTime = this.handleBusinessHours(item.business_hours)
          if(businessTime){
            this.addForm.start_time = businessTime.beginTime
            this.addForm.end_time = businessTime.endTime
            this.businessTime = [businessTime.beginTime + ':00',businessTime.endTime + ':00']
          }
        } else {
          if(res.data.message=='店铺信息不存在'){
            this.shopStatus = '待创建'
          } else {
            this.$message.error(res.data.message)
          }
          this.addForm.shop_id = ''
          this.addForm.shop_name = ''
          this.addForm.contact_name = ''
          this.addForm.contact_phone = ''
          this.addForm.contact_email = ''
          this.addForm.shop_address = ''
          this.addForm.shop_address_detail = ''
          this.addForm.shop_lng = ''
          this.addForm.shop_lat = ''
          this.addForm.start_time = ''
          this.addForm.end_time = ''
          this.addForm.status = ''
        }

      },

      handleBusinessHours(str) {
        if(!str){
          return
        }
        let arrStr = JSON.parse(str)
        let arr = JSON.parse(arrStr)
        if(arr.length&&arr.length>=1){
          return arr[0]
        }
      },

      async updateSubmitBtn() {
        //设置id和经纬度
        this.addForm.shop_id = this.merchantId
        this.addForm.shop_lat = this.lat
        this.addForm.shop_lng = this.lng

        //给时间赋值
        this.addForm.start_time = this.businessTime[0].substring(0, 5)
        this.addForm.end_time = this.businessTime[1].substring(0, 5)

        console.log(this.addForm)
        /*return*/

        const res = await this.$api.updateDeliveryShop(this.addForm)
        if (res.data.level === "success") {
          this.$emit('hideMeituanConfigDialog') //关闭窗口
        } else {
          this.$message.error(res.data.message)
        }
      },

      async submitBtn() {

        //设置id和经纬度
        this.addForm.shop_id = this.merchantId
        this.addForm.shop_lat = this.lat
        this.addForm.shop_lng = this.lng

        //给时间赋值
        this.addForm.start_time = this.businessTime[0].substring(0, 5)
        this.addForm.end_time = this.businessTime[1].substring(0, 5)

        console.log(this.addForm)
        /*return*/

        const res = await this.$api.createDeliveryShop(this.addForm)
        if(res.data.level==="success"){
          this.$emit('hideMeituanConfigDialog') //关闭窗口
        } else {
          this.$message.error(res.data.message)
        }
      },

    },
  }
</script>

<style scoped>
  .tip{
    color: grey;
    margin-top: 8px;
    line-height: 20px !important;
  }
</style>
